<template>
  <div class = "w">
    <div class = "msg-main">
      <el-button-group>
        <el-button>全部</el-button>
        <el-button>未读</el-button>
      </el-button-group>
      <div class = "msg-ul" style="color:#797979">
        <ul>
          <li v-for = "(m,index) in msgList" :key = "index">
            <el-image :src = "m.url" class = "image-slot">
              <div slot = "error">
                <i class = "el-icon-picture-outline"></i>
              </div>
            </el-image>
            <span style = "flex: 4">{{m.title}}</span>
            <span style = "flex: 3;">{{m.time}}</span>
            <span style="flex: 2">
              <el-link type="primary" :underline="false">
                标为已读 | 删除
              </el-link>
            </span>
          </li>
        </ul>
        <el-pagination
          @size-change = "handleSizeChange"
          @current-change = "handleCurrentChange"
          :current-page.sync = "currentPage2"
          :page-sizes = "[10,20,30]"
          layout = "sizes, prev, pager, next"
          :total = "100"
          background
          style="text-align: center">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
    export default {
        data() {
            return {
                msgList: [
                    {url: './static/igm/消息.png', title: '通知详情', time: '2016-09-21 08:50:08'},
                    {url: './static/igm/消息.png', title: '通知详情', time: '2016-09-21 08:50:08'},
                    {url: './static/igm/消息.png', title: '通知详情', time: '2016-09-21 08:50:08'},
                    {url: './static/igm/消息.png', title: '通知详情', time: '2016-09-21 08:50:08'},
                    {url: './static/igm/消息.png', title: '通知详情', time: '2016-09-21 08:50:08'},
                    {url: './static/igm/消息.png', title: '通知详情', time: '2016-09-21 08:50:08'},
                    {url: './static/igm/消息.png', title: '通知详情', time: '2016-09-21 08:50:08'},
                    {url: './static/igm/消息.png', title: '通知详情', time: '2016-09-21 08:50:08'},
                    {url: './static/igm/消息.png', title: '通知详情', time: '2016-09-21 08:50:08'},
                    {url: './static/igm/消息.png', title: '通知详情', time: '2016-09-21 08:50:08'}
                ],
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4
            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped>
  .msg-main {
    padding: 30px;
  }

  .msg-ul {
    margin-top: 20px;
  }

  .msg-ul li {
    height: 70px;
    margin-bottom: 20px;
    display: flex;
  }

  .msg-ul span {
    display: inline-block;
    line-height: 70px;
    vertical-align: bottom;
  }

  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: 5px;
    background-color: #F5F7FA;
    flex: 1;
    margin-right: 20px;
  }
</style>
